<template>
  <div id="addUser">
    <div class="homeTitle">用户信息</div>
    <div class="tablelist">
      <table>
        <tr> 
          <td><span class="bitian">*</span>姓名</td>
          <td><el-input v-model="name" placeholder="请输入"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>工号</td>
          <td><el-input v-model="gonghao" placeholder="请输入"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>手机号</td>
          <td><el-input v-model="tel" placeholder="请输入"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>身份证号</td>
          <td><el-input v-model="idCard" placeholder="请输入"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>所属地市</td>
          <td>
            <el-select v-model="city" placeholder="请选择" @change="cityChange">
              <el-option
                v-for="ele in cityOption"
                :key="ele.name"
                :label="ele.name"
                :value="ele.name"
              ></el-option>
            </el-select>
          </td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>所属机构\行社</td>
          <td>
            <el-select v-model="bank" placeholder="请选择" @change="bankChange">
              <el-option
                v-for="ele in bankOption"
                :key="ele.name"
                :label="ele.name"
                :value="ele.name"
              ></el-option>
            </el-select>
          </td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>所属部门</td>
          <td>
            <el-select v-model="bumen" placeholder="请选择" @change="bumenChange">
              <el-option
                v-for="ele in bumenOption"
                :key="ele.value"
                :label="ele.name"
                :value="ele.name"
              ></el-option>
            </el-select>
          </td>
        </tr>
        <tr> 
          <td>子部门/科室</td>
          <td>
            <el-select v-model="keshi" placeholder="请选择">
              <el-option
                v-for="ele in keshiOption"
                :key="ele.value"
                :label="ele.name"
                :value="ele.name"
              ></el-option>
            </el-select>
          </td>
        </tr>
      </table>
      <table class="lastTable">
        <tr>
          <td class="tdLeft">
            <span class="bitian">*</span>栏目权限
          </td>
          <td>
            <el-select v-model="quanxian" placeholder="请选择">
              <el-option
                v-for="item in quanxianOption"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            <span class="bitian">*</span>
            查询权限
          </td>
          <td>
            <el-select v-model="query" placeholder="请选择">
              <el-option
                v-for="item in queryOption"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td rowspan="2" class="tdLeft">
            流程权限
          </td>
          <!-- -------------------------流程权限5个------------------------------------------ -->
          <td class="fourS">
            <el-select v-model="selCity" placeholder="请选择地市" @change="cityChange1">
              <el-option
                v-for="item in selCityOption"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
            <el-select v-model="selBank" placeholder="请选择行社\机构" @change="bankChange1">
              <el-option
                v-for="item in selBankOption"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
            <!-- <el-select v-model="selBumen" placeholder="请选择部门组别" @change="bumenChange1"> -->
            <el-select v-model="selBumen" placeholder="请选择部门组别">
              <el-option
                v-for="item in selBumenOption"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <!-- <el-select v-model="selZubie" placeholder="请选择子部门组别">
              <el-option
                v-for="item in selZubieOption"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select> -->
            <el-select v-model="selJuese" placeholder="请选择角色">
              <el-option
                v-for="item in selJueseOption"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-button size="small" type="primary" @click="addTian">添加</el-button>
          </td>
        </tr>
        <tr>
          <td>
            <p>已添加权限：</p>
            <el-tag
              v-for="(tag, index) in tags"
              :key="index"
              closable
              @close="handleClose(tag)"
              :type="tag.type">
              {{tag}}
            </el-tag>
          </td>
        </tr>
      </table>
    </div>
    <div class="btn">
      <el-button type="primary" size="small" @click="submit">提交</el-button>
      <el-button type="primary" size="small" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "addUser",
  data() {
    return {
      tags: [],
      // 第一个表格
      name: '',
      gonghao: '',
      tel: '',
      idCard: '',
      city: '',
      cityOption: '',
      bank: '',
      bankOption: '',
      bumen: '',
      bumenOption: '',
      keshi: '',
      keshiOption: '',
      // -------第二个表格-----------
      quanxian: '',
      quanxianOption: '',
      query: '',
      queryOption: '',
      // 五个
      selCity: '',
      selCityOption: '',
      selBank: '',
      selBankOption: '',
      selBumen: '',
      selBumenOption: ['金融市场部','行社管理层','风险管理部'],
      selZubie: '',
      selZubieOption: [],
      selJuese: '',
      selJueseOption: [],
      roleJson: []
    };
  },
  mounted() {
    this.getCity();
    this.getCity1();
    this.lanmu();
    this.queryQuan();
  },
  methods: {
    submit() {
      // 子部门科室Id
    if (!this.bumenOption) {
      this.$message({message: '请您填写完整',type: 'warning'});
      return false;
    }
    let bumen = this.bumenOption.find((ele)=> {
        return ele.name == this.bumen;
      });
     let obj= {
        name: this.name,
        jobNum: this.gonghao,
        phone: this.tel,
        cardId: this.idCard,
        city: this.city,
        bank: this.bank,
        department: this.bumen,
        childDepartment: this.keshi,
        qId: this.query,
        roleId: this.quanxian
      };
      if (!bumen) {
        obj.oId = null;
      } else {
        obj.oId = bumen.id;
      }
      for (let k in obj) {
        if(k == 'phone') {
          if (!/^(1[3-9])\d{9}$/.test(obj[k])) {
            this.$message({message: '手机号不合法',type: 'warning'});
            return false;
          }
        } else if (k=='childDepartment' || k=='oId') {
          continue;
        } else if (!obj[k]) {
           this.$message({message: '请您填写完整',type: 'warning'});
           return false;
        }
      };
       this.axios.post('user/register', obj)
        .then(({data}) => {
          if (data.code == 200) {
            this.$message({message: '提交成功',type: 'success'});
            // 如果roleJson的长度不为0则调用添加流程接口
            if(this.roleJson != 0) {
              this.addliucheng(data.data);
            } else {
              this.$router.go(-1);
            }
          } else {
            this.$message({message: data.message,type: 'warning'});
          }
        })
        .catch(function (error) {
            console.log(error);
          });
    },
    // 添加流程权限
    addliucheng (data) {
      this.axios.post('userApprovalRole/addOrUpdate', {roleJson: this.roleJson, userId: parseInt(data.id)},{headers: {token:data.msg}})
        .then(({data}) => {
          if (data.code == 200) {
            this.$router.go(-1);
          } else {
              this.$message({message: data.message,type: 'warning'});
          }
        })
        .catch(function (error) {
            console.log(error);
          });
    },
    // 取消按钮
    cancel() {
      this.$router.go(-1);
    },
    // 删除已添加流程权限按钮
    handleClose(tag) {
      let index = this.tags.indexOf(tag);
      this.tags.splice(index, 1);
      this.roleJson.splice(index, 1);
    },
    // ---------四级联动开始----------------------
    // 地市查询
    getCity() {
      this.axios.get('organizationalChart/findAllCities')
      .then(({data}) => {
          this.cityOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 地市改变 
    cityChange() {
     let obj = this.cityOption.find((ele)=> {
        return ele.name == this.city;
      });
      this.bank = '';
      this.bumen = '';
      this.keshi = '';
      this.axios.get('organizationalChart/selectBank', {params: {id: obj.id}})
        .then(({data}) => {
          this.bankOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 机构行社改变
    bankChange() {
      let obj = this.bankOption.find((ele)=> {
        return ele.name == this.bank;
      });
      this.bumen = '';
      this.keshi = '';
      this.axios.get('organizationalChart/selectDepartment', {params: {id: obj.id}})
        .then(({data}) => {
          this.bumenOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 所属部门改变
    bumenChange() {
      let obj = this.bumenOption.find((ele)=> {
        return ele.name == this.bumen;
      });
      this.keshi = '';
      this.axios.get('organizationalChart/selectChildDepartment', {params: {id: obj.id}})
        .then(({data}) => {
          this.keshiOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // -----------四级联动结束----------------
    // 栏目权限查询
    lanmu() {
      this.axios.get('role/selectRole')
        .then(({data}) => {
          this.quanxianOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 查询权限
    queryQuan() {
      this.axios.get('queryPermissions/findAll')
        .then(({data}) => {
          this.queryOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // --------第二个表格的添加流程权限------------------
    getCity1() {
      this.axios.get('organizationalChart/findAllCities')
      .then(({data}) => {
          this.selCityOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 地市改变 
    cityChange1() {
     let obj = this.selCityOption.find((ele)=> {
        return ele.name == this.selCity;
      });
      this.selBank = '';
      this.selBumen = '';
      this.selZubie = '';
      this.axios.get('organizationalChart/selectBank', {params: {id: obj.id}})
        .then(({data}) => {
          this.selBankOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 机构行社改变
    bankChange1() {
      let obj = this.selBankOption.find((ele)=> {
        return ele.name == this.selBank;
      });
      this.selBumen = '';
      this.selZubie = '';
      // this.axios.get('organizationalChart/selectDepartment', {params: {id: obj.id}})
      //   .then(({data}) => {
      //     this.selBumenOption = data.data;
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });
    },
    // 所属部门改变
    bumenChange1() {
      let obj = this.selBumenOption.find((ele)=> {
        return ele.name == this.selBumen;
      });
      this.selZubie = '';
      this.axios.get('organizationalChart/selectChildDepartment', {params: {id: obj.id}})
        .then(({data}) => {
          this.selZubieOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 添加按钮
    addTian () {
      if(this.selCity== '' || this.selBank =='' || this.selBumen== '' || this.selJuese == '') {
        this.$message({message: '请您选择完整',type: 'warning'});
      } else {
        let str ='';
        str= `${this.selCity}-${this.selBank}-${this.selBumen}-${this.selJuese}`;
        let obj = this.tags.find((ele)=> {
          return ele == str;
        })
        if (obj) {
          this.$message({message: '请勿重复添加',type: 'warning'});
          return false;
        }
        this.tags.push(str);
        this.roleJson.push({city: this.selCity, bank:this.selBank, department: this.selBumen, roleName:this.selJuese})
      }
    },
  },
  watch: {
    selBank(xin, lao) {
      if (xin == '省联社') {
        this.selBumenOption= ['风险管理部'];
      } else {
        this.selBumenOption= ['金融市场部','行社管理层','风险管理部'];
      }
    },
    selBumen(xin, lao) {
      if(xin =='金融市场部') {
        this.selJueseOption = ['交易员','复核人','部门经理']
      } else if (xin =='行社管理层') {
        this.selJueseOption = ['分管领导','行长','理事长']
      } else if (xin =='风险管理部') {
        this.selJueseOption = ['审核人']
      }
      this.selJuese = '';
    }
  }

};
</script>

<style lang="scss">
#addUser {
  .tablelist {
    margin-top: 30px;
    table {
      border: 1px solid white;
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 50px;
      tr {
        td {
          text-align: center;
          padding: 5px 10px;
          border-right: 1px solid white;
          border-bottom: 1px solid white;
          .el-input__inner{
            background: transparent;
            color: white;
            border:0;
          }
          &:first-child {
            background: rgba(53, 58, 58, 0.9);
            color: white;
            width: 30%;
            .bitian {
              color: red;
            }
          }
          &:last-child {
            background: rgba(53, 58, 58, 0.45);
            color: white;
            text-align: left;
          }
          .el-select {
            width: 100%;
          }
          &.fourS {
            // display: flex;
            // justify-content: space-between;
            .el-select {
              width: 18%;
            }
          }
          .el-tag {
            background: white;
            margin-right: 20px;
            margin-bottom: 10px;
            .el-icon-close {
              background-color: red;
              color: white;
            }
          }
        }
      }
    }
    .lastTable {
      margin-bottom: 0px;
      .tdLeft {
        width: 30%;
      }
      td {
        width: 70%;
         &.fourS {
          .el-select {
            width: 18%;
          }
          .el-button {
            // margin-left: 25px;
          }
        }
      }

    }
    tr {
      td {
        text-align: center;
        padding: 5px 10px;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
        &:first-child {
          background: #343839;
          color: white;
          width: 30%;
          .bitian {
            color: red;
          }
        }
        &:last-child {
          background: #7a7a73;
          color: white;
          text-align: left;
        }
        .el-select {
          width: 100%;
        }
      }
    }
  }
  .btn {
    text-align: center;
    margin-top: 20px;
  }
}
</style>
